<template>
    <div id="hezi">
    <div class="right">
    <div class="buttons">
    <el-button type="primary" @click="handleAdd">新增部门</el-button>
    <el-input v-model="formInline.search" placeholder="请输入部门名称" @blur="search"></el-input>
    </div>
    <el-table :data="tableData" border>
    <el-table-column prop="id" label="部门代码"></el-table-column>
    <el-table-column prop="name" label="部门名称"></el-table-column>
    <el-table-column prop="time" label="创建时间"></el-table-column>
    <el-table-column prop="ren" label="创建人"></el-table-column>
    <el-table-column prop="status" label="是否启用">
    <template slot-scope="scope">
    <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </template>
    </el-table-column>
    <el-table-column label="操作">
    <template slot-scope="scope">
    <el-button type="text" v-if="scope.row.status === '1'" @click="handleEdit(scope.row)">编辑</el-button>
    <el-popconfirm @confirm="deleteDepartment(scope.row)"  title="确定删除该数据吗？" style="margin-left: 8px;">
    <el-button type="text" v-if="scope.row.status === '1'" slot="reference">删除</el-button>
    </el-popconfirm>
    </template>
    </el-table-column>
    </el-table>


    <div class="flex-container">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="pageSizeOptions"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
</div>
    
    <!-- 新增部门模态框 -->
    <el-dialog title="新增部门" :visible="isAddDialogVisible" @close="handleAddDialogClose" width="600px">
    <div class="dialog-content">
    <el-form :model="newDepartment" label-position="top">
    <el-form-item label="部门代码">
    <el-input v-model="newDepartment.id" class="custom-input"></el-input>
    </el-form-item>
    <el-form-item label="部门名称">
    <el-input v-model="newDepartment.name" class="custom-input"></el-input>
    </el-form-item>
    <el-form-item label="创建时间">
    <el-date-picker v-model="newDepartment.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
    </el-form-item>
    <el-form-item label="创建人">
    <el-input v-model="newDepartment.ren" class="custom-input"></el-input>
    </el-form-item>
    <el-form-item label="是否启用">
    <el-switch v-model="newDepartment.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-form-item>
    </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
    <el-button @click="handleAddDialogClose">取消</el-button>
    <el-button type="primary" @click="handleAddDepartment">确认</el-button>
    </div>
    </el-dialog>
    <!-- 编辑部门模态框 -->
    <el-dialog title="编辑部门" :visible="isEditDialogVisible" @close="handleEditDialogClose" width="600px">
    <div class="dialog-content">
    <el-form :model="editDepartment" label-position="top">
    <el-form-item label="部门代码">
    <el-input v-model="editDepartment.id" class="custom-input"></el-input>
    </el-form-item>
    <el-form-item label="部门名称">
    <el-input v-model="editDepartment.name" class="custom-input"></el-input>
    </el-form-item>
    <el-form-item label="创建时间">
    <el-date-picker v-model="editDepartment.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
    </el-form-item>
    <el-form-item label="创建人">
    <el-input v-model="editDepartment.ren" class="custom-input"></el-input>
    </el-form-item>
    <el-form-item label="是否启用">
    <el-switch v-model="editDepartment.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-form-item>
    </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
    <el-button @click="handleEditDialogClose">取消</el-button>
    <el-button type="primary" @click="handleSaveDepartment">确认</el-button>
    </div>
    </el-dialog>
    
    </div>
    </template>

    

    <script>
    export default {
    data() {
    return {
      pageSizeOptions: [5, 4, 3],
    treeInput: "",
    formInline: {
    search: "",
    },
    newDepartment: {
    id: "",
    name: "",
    time: "",
    ren: "",
    status: "",
    },
    editDepartment: {
    id: "",
    name: "",
    time: "",
    ren: "",
    status: "",
    },
    data: [],
    tableData: [],
    total: 0,
    page: 1,
    count: 5,
    isAddDialogVisible: false,
    isEditDialogVisible: false,
    isConfirmDeleteVisible: false,
    confirmDeleteDepartment: null,
    defaultProps: {
    children: "children",
    label: "label",
    },
    };
    },
    methods: {
      handleSizeChange(v) {
      this.count = v;
      this.page = 1;
      this.getData();
    },
    handleCurrentChange(v) {
    console.log(v);
    this.page = v;
    this.getData();
    },
    getData() {
    this.$axios
    .get("/section", {
    params: {
    q: `${this.formInline.search}`,
    _page: this.page,
    _limit: this.count,
    },
    headers: {
    "X-Total-Count": "true",
    },
    })
    .then(({ data, headers }) => {
    this.total = Number(headers["x-total-count"]);
    this.tableData = data;
    })
    .catch((error) => {
    console.log(error);
    });
    },
    search() {
    this.page = 1;
    this.getData();
    },
    handleAdd() {
    this.isAddDialogVisible = true;
    this.newDepartment = {
    id: "",
    name: "",
    time: "",
    ren: "",
    status: "",
    };
    },
    handleAddDialogClose() {
    this.isAddDialogVisible = false;
    },
    handleAddDepartment() {
    console.log("新增部门：", this.newDepartment);
    this.isAddDialogVisible = false;
    this.$axios
    .post("/section", {
    id: this.newDepartment.id,
    name: this.newDepartment.name,
    time: this.newDepartment.time,
    ren: this.newDepartment.ren,
    status: this.newDepartment.status,
    })
    .then(({ data }) => {
    if (data) {
    this.$message({
    message: "添加成功",
    type: "success",
    duration: 1400,
    });
    this.newDepartment.id = "";
    this.newDepartment.name = "";
    this.newDepartment.time = "";
    this.newDepartment.ren = "";
    this.newDepartment.status = "";
    this.getData();
    } else {
    alert("添加失败");
    }
    })
    .catch((error) => {
    console.log(error);
    });
    },
    handleEdit(row) {
    this.isEditDialogVisible = true;
    this.editDepartment = { ...row };
    },
    handleSaveDepartment() {
    console.log("编辑部门：", this.editDepartment);
    this.isEditDialogVisible = false;
    this.$axios
    .put(`/section/${this.editDepartment.id}`, {
    name: this.editDepartment.name,
    time: this.editDepartment.time,
    ren: this.editDepartment.ren,
    status: this.editDepartment.status,
    })
    .then(({ data }) => {
    if (data) {
    this.$message({
    message: "更新成功",
    type: "success",
    duration: 1400,
    });
    this.getData();
    } else {
    alert("更新失败1");
    }
    })
    .catch((error) => {
    console.log(error);
    });
    },
    handleEditDialogClose() {
    this.isEditDialogVisible = false;
    },
    handleDelete(row) {
    console.log("删除部门:", row);
    this.confirmDeleteDepartment = row;
    this.isConfirmDeleteVisible = true;
    },
    deleteDepartment(row) {
const index = this.tableData.indexOf(row);
if (index !== -1) {
this.$axios
.delete(`/section/${row.id}`)
.then(({ data }) => {
if (data) {
this.$message({
message: "删除成功",
type: "success",
duration: 1400,
});
this.tableData.splice(index, 1);
if (index === 0 && this.page > 1) {
this.page--;
}
this.getData();
} else {
alert("删除失败");
}
})
.catch((error) => {
console.log(error);
});
}
this.resetConfirmDelete();
},
    resetConfirmDelete() {
    this.isConfirmDeleteVisible = false;
    this.confirmDeleteDepartment = null;
    },
    },
    mounted() {
    this.getData();
    },
    };
    </script>


    <style lang="less" scoped>
.flex-container {
    margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block {
  margin-right: 370px;
  margin-top: -6px;
}

 .data-count {
  margin-left: 380px;
}
    .wen{
        margin-left: 160px;
    }
    .dialog-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 52px);
    }
    
    #hezi {
    width: 100%;
    background-color: #fff;
    position: relative;
    }
    
    .header {
    width: calc(100%-20px);
    height: 60px;
    border: 1px solid #eee;
    line-height: 60px;
    padding-left: 20px;
    font-size: 20px;
    }
    

    
    .right {
    position: relative;
    width: 1200px;

    margin-top: -98px;
    overflow: hidden;
    }
    
    .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 109px;
    }
    
    .el-input {
    width: 250px;
    
    }
    
    .tree-width {
    width: 250px;
    }
    
    .el-pagination {
    margin-top: 15px;
    margin-left: 350px;
    }
    
    .dialog-content .el-form-item {
    margin-bottom: 10px;
    }
    
    .dialog-content .el-form-item {
    width: 100%;
    }
    .dialog-content .el-form-item .el-input{
    width: 400px;
    }
    </style>
